import React, { useState, useEffect, useRef } from "react";
import { useNavigate } from "react-router-dom";
import axios from "axios";
import "../styles/MemeGenerator.css";
import MemeCanvas from "../components/MemeCanvas";
import MemeControls from "../components/MemeControls";
import TextEditor from "../components/TextEditor";
import FilterSelector from "../components/FilterSelector";
import TemplateSelector from "../components/TemplateSelector";
import Tabs from "../components/Tabs";
import StickerSelector from "../components/StickerSelector";

const MemeGenerator = () => {
  const [image, setImage] = useState(null);
  const [textElements, setTextElements] = useState([]);
  const [selectedTextId, setSelectedTextId] = useState(null);
  const [font, setFont] = useState("Arial");
  const [color, setColor] = useState("#FFFFFF");
  const [size, setSize] = useState(30);
  const [filter, setFilter] = useState(null);
  const [stickers, setStickers] = useState([]);
  const [activeTab, setActiveTab] = useState("text");
  const [generating, setGenerating] = useState(false);
  const [uploadOption, setUploadOption] = useState("upload");
  const [templates, setTemplates] = useState([]);
  // 添加动画类型状态
  const [textAnimation, setTextAnimation] = useState("none");

  const navigate = useNavigate();
  const canvasRef = useRef(null);

  // 动画类型选项
  const animationOptions = [
    { value: "none", label: "无动画" },
    { value: "bounce", label: "弹跳" },
    { value: "wave", label: "波浪" },
    { value: "shake", label: "抖动" },
    { value: "rotate", label: "旋转" },
    { value: "zoom", label: "缩放" },
    { value: "fade", label: "淡入淡出" },
  ];

  // ... 其他代码保持不变 ...

  // 在组件的JSX部分的合适位置添加动画选择UI
  return (
    <div className="meme-generator-container">
      <h1>表情包生成器</h1>
      <div className="meme-workspace">
        <div className="canvas-area">
          <MemeCanvas
            image={image}
            textElements={textElements}
            selectedTextId={selectedTextId}
            onSelectText={handleSelectText}
            onTextDrag={handleTextDrag}
            onCanvasClick={handleCanvasClick}
            filter={filter}
            stickers={stickers}
            onGenerate={handleGenerate}
            generating={generating}
            textAnimation={textAnimation}
            setTextAnimation={setTextAnimation}
          />
        </div>
        <div className="control-panel">
          <Tabs
            tabs={[
              { id: "text", label: "文字" },
              { id: "stickers", label: "贴纸" },
              { id: "filters", label: "滤镜" },
              { id: "animation", label: "动画" },
            ]}
            activeTab={activeTab}
            onChange={setActiveTab}
          />

          {activeTab === "text" && (
            <div className="text-controls">
              <MemeControls
                onImageSelect={handleImageSelect}
                onAddText={handleAddText}
                uploadOption={uploadOption}
                setUploadOption={setUploadOption}
              />
              {selectedTextId && (
                <TextEditor
                  textElements={textElements}
                  selectedTextId={selectedTextId}
                  onTextChange={handleTextChange}
                  onStyleChange={handleStyleChange}
                  onDeleteText={handleDeleteText}
                  font={font}
                  setFont={setFont}
                  color={color}
                  setColor={setColor}
                  size={size}
                  setSize={setSize}
                />
              )}
              {uploadOption === "template" && (
                <TemplateSelector
                  templates={templates}
                  onSelectTemplate={handleSelectTemplate}
                />
              )}
            </div>
          )}

          {activeTab === "stickers" && (
            <StickerSelector onSelectSticker={handleAddSticker} />
          )}

          {activeTab === "filters" && (
            <FilterSelector currentFilter={filter} onFilterChange={setFilter} />
          )}

          {activeTab === "animation" && (
            <div className="animation-controls">
              <h3>文字动画效果</h3>
              <div className="animation-selector">
                {animationOptions.map((option) => (
                  <div key={option.value} className="animation-option">
                    <input
                      type="radio"
                      id={`animation-${option.value}`}
                      name="animation-type"
                      value={option.value}
                      checked={textAnimation === option.value}
                      onChange={() => setTextAnimation(option.value)}
                    />
                    <label htmlFor={`animation-${option.value}`}>
                      {option.label}
                    </label>
                  </div>
                ))}
              </div>
              <div className="animation-preview">
                <p>生成GIF时将应用所选动画效果</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};
